<!DOCTYPE HTML>
<html>
<head>
    <title>Phaser Spine Example</title>

    <script src="../node_modules/phaser/build/phaser.js"></script>
    <script src="../build/phaser-spine.js"></script>

    <style>
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<script>

    var buddy, game;

    game = new Phaser.Game(400, 400, Phaser.AUTO, '', {init: init, preload: preload, create: create});

    function init() {
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    }

    function preload() {
        game.plugins.add(PhaserSpine.SpinePlugin);
        game.stage.disableVisibilityChange = true;

        game.load.spine('goblin', "assets/goblins.json");
        game.load.image('button1', "assets/btn_01.png");
        game.load.image('button2', "assets/btn_02.png");
    }

    function create() {
        //create the spine object
        goblin = game.add.spine(200, 400, "goblin");
        goblin.setAnimationByName(0, "walk", true);
        goblin.setSkinByName("goblin");
        goblin.setToSetupPose();
        goblin.scale.set(0.5);

        //Add skin switch button
        var button1 = this.game.add.button(20, 20, 'button1', function() {
            goblin.setSkinByName("goblin");
            goblin.setToSetupPose();
        });
        var button1 = this.game.add.button(20, 130, 'button2', function() {
            goblin.setSkinByName("goblingirl");
            goblin.setToSetupPose();
        });
    }
</script>

</body>
</html>